<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        :inline="true"
        size="small"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent>
        <el-form-item label="外部订单号:">
          <el-input style="width:250px;" v-model="where.out_order_code" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="reload"
            icon="el-icon-search"
            class="ele-btn-icon">查询
          </el-button>
          <el-button size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 数据表格 -->
      <div :class="['ele-table-tool', {'ele-table-tool-default': 'default'}]">
        <div class="ele-table-tool-title ele-space">
          <el-button
            @click="addMonitor(null)"
            type="primary"
            icon="el-icon-circle-plus-outline"
            class="ele-btn-icon"
            size="small">添加监控
          </el-button>
        </div>
        <div class="ele-tool ele-space">
          <div class="ele-tool-item ele-action">
            <el-tooltip content="刷新" placement="top">
              <i class="el-icon-refresh-right" @click="reload"></i>
            </el-tooltip>
          </div>
        </div>
      </div>
      <my-pro-table
        ref="monitorOrderTable"
        :choose.sync="choose"
        :data="pageData"
        v-loading="loading"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        row-key="monitor_order_id"
        size="small"
        fit border highlight-current-row
        height="calc(100vh - 294px)">
        <el-table-column type="index" width="45" align="center"/>
        <el-table-column label="外部订单号" min-width="175px" align="center">
          <template slot-scope="{row}">
            <el-button @click="toOrder(row.order_code)" type="text">{{row.out_order_code}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="order_status_txt" label="订单状态" min-width="120px" align="center"/>
        <el-table-column prop="dep" label="出发" min-width="50px" align="center"/>
        <el-table-column prop="arr" label="到达" min-width="50px" align="center"/>
        <el-table-column prop="flight_no" label="航班号" min-width="70px" align="center"/>
        <el-table-column prop="cabin" label="仓位" min-width="50px" align="center"/>
        <el-table-column prop="dep_date" label="出发日期" min-width="90px" align="center"/>
        <el-table-column prop="view_price" label="票面价" min-width="70px" align="center"/>
        <el-table-column prop="sale_price" label="销售价" min-width="70px" align="center"/>
        <el-table-column label="监控底价" :min-width="editClnWidth1" align="center">
          <template slot-scope="{row}">
            <div style="display:flex;justify-content:space-between;padding: 0;">
              <div v-if="edit_column==row && edit_column_name == 'monitor_min_price'" style="display:flex;justify-content:space-between;width:100%;">
                <el-input size="mini" style="width:100%;text-align: center;" v-model="row.monitor_min_price"/>
                <el-button-group style="margin-left:10px;display:flex;">
                  <el-button plain type="primary" :loading="save_loading" style="padding:7px" @click="doEditItem(row,'monitor_min_price')" size="mini" icon="el-icon-_save"></el-button>
                  <el-button style="padding:7px" @click="cancelEditItem(row,'monitor_min_price')" size="mini" icon="el-icon-close"></el-button>
                </el-button-group>
              </div>
              <span v-else>
                {{row.monitor_min_price}}
              </span>
              <el-link v-if="edit_column==null" type="primary" :underline="false" icon="el-icon-edit" @click="editItem(row,'monitor_min_price')"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="监控高价" :min-width="editClnWidth2" align="center">
          <template slot-scope="{row}">
            <div style="display:flex;justify-content:space-between;padding: 0;">
              <div v-if="edit_column==row && edit_column_name == 'monitor_max_price'" style="display:flex;justify-content:space-between;width:100%;">
                <el-input size="mini" style="width:100%;text-align: center;" v-model="row.monitor_max_price"/>
                <el-button-group style="margin-left:10px;display:flex;">
                  <el-button plain type="primary" :loading="save_loading" style="padding:7px" @click="doEditItem(row,'monitor_max_price')" size="mini" icon="el-icon-_save"></el-button>
                  <el-button style="padding:7px" @click="cancelEditItem(row,'monitor_max_price')" size="mini" icon="el-icon-close"></el-button>
                </el-button-group>
              </div>
              <span v-else>
                {{row.monitor_max_price}}
              </span>
              <el-link v-if="edit_column==null" type="primary" :underline="false" icon="el-icon-edit" @click="editItem(row,'monitor_max_price')"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="监控状态" :min-width="editClnWidth3" align="center">
          <template slot-scope="{row}">
            <div style="display:flex;justify-content:space-between;padding: 0;">
              <div v-if="edit_column==row && edit_column_name == 'monitor_status'" style="display:flex;justify-content:space-between;width:100%;">
                <el-select size="mini" v-model="row.monitor_status">
                  <el-option label="监控中" :value="1"></el-option>
                  <el-option label="未监控" :value="0"></el-option>
                </el-select>
                <el-button-group style="margin-left:10px;display:flex;">
                  <el-button plain type="primary" :loading="save_loading"
                             style="padding:7px"
                             @click="doEditItem(row,'monitor_status')"
                             size="mini" icon="el-icon-_save"></el-button>
                  <el-button style="padding:7px"
                             @click="cancelEditItem(row,'monitor_status')"
                             size="mini" icon="el-icon-close"></el-button>
                </el-button-group>
              </div>
              <span v-else>
                <ele-dot v-if="row.monitor_status==1" type="success" text="监控中" style="font-size:12px;"/>
                <ele-dot v-if="row.monitor_status==0" type="info" :ripple="false" text="未监控" style="font-size:12px;"/>
              </span>
              <el-link
                v-if="edit_column==null"
                type="primary"
                :underline="false"
                icon="el-icon-edit"
                @click="editItem(row,'monitor_status')">
              </el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="order_create_time" label="来单时间" min-width="150px" align="center"/>
        <el-table-column label="操作" width="90px" align="center" fixed="right" :resizable="false">
          <template slot-scope="{row}">
            <el-link @click="remove(row)" slot="reference" icon="el-icon-delete" type="danger" :underline="false">删除</el-link>
          </template>
        </el-table-column>
      </my-pro-table>
      <el-pagination v-if="page.count>0" style="margin-top:15px;" :current-page="page.page" :page-size="page.limit" :total="page.count"
                     @size-change="d=>(page.limit=d)&&query()"
                     @current-change="d=>(page.page=d)&&query()" layout="total, prev, pager, next, jumper" />
      <div v-else style="height:47px;"></div>
    </el-card>
    <!-- 编辑弹窗 -->
    <monitor-order-edt
      :data="current"
      :visible.sync="showEdit"
      @done="reload"/>
  </div>
</template>

<script>
import MyProTable from '@/components/my-pro-table';
import monitorOrderEdt from './monitor-order-edt';
export default {
  name: 'monitorOrder',
  components: {MyProTable,monitorOrderEdt},
  data() {
    return {
      ipcRenderer:null,
      showEdit:false,
      pageData:[],
      choose: [],
      loading:false,
      page: {page: 1, limit: 20, count: 0},   // 分页参数
      editClnWidth1:"90px",
      editClnWidth2:"90px",
      editClnWidth3:"90px",
      where: {},
      current: null,// 当前编辑数据
      metadata: null,
      edit_column:null,
      edit_column_name:'',
      save_loading: false,
    };
  },
  created() {
    if (this.isElectron){
      this.ipcRenderer = require('electron').ipcRenderer;
    }
    this.reload();
  },
  methods: {
    /* 刷新表格 */
    reload() {
      this.loading = true;
      this.metadata = null;
      this.edit_column = null;
      this.edit_column_name = '';
      this.$http.post('/app.monitor.order.lst', Object.assign(this.where, this.page)).then(res => {
        this.loading = false;
        if (res.data.code === 0) {
          this.pageData = res.data.data.data;
          this.page = res.data.data.page;
        } else {
          this.$message.error(res.data.msg || '获取数据失败');
        }
      }).catch(e => {
        this.loading = false;
        this.$message.error(e.message);
      });
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.reload();
    },
    editItem(row,column_name){
      this.metadata = JSON.stringify(row);
      this.edit_column=row;
      this.edit_column_name=column_name;
      if(column_name=='monitor_min_price'){
        this.editClnWidth1 = "200px";
      }
      if(column_name=='monitor_max_price'){
        this.editClnWidth2 = "200px";
      }
      if(column_name=='monitor_status'){
        this.editClnWidth3 = "200px";
      }

    },
    cancelEditItem(row,column_name){
      this.pageData[this.pageData.findIndex(d => d.monitor_order_id === row.monitor_order_id)] = JSON.parse(this.metadata);
      this.metadata = null;
      this.edit_column = null;
      this.edit_column_name = '';
      if(column_name=='monitor_min_price'){
        this.editClnWidth1 = "90px";
      }
      if(column_name=='monitor_max_price'){
        this.editClnWidth2 = "90px";
      }
      if(column_name=='monitor_status'){
        this.editClnWidth3 = "90px";
      }
    },
    doEditItem(row,column_name){
      this.save_loading = true;
      this.$http.post('/app.monitor.order.set', {monitor_order_id: row.monitor_order_id, field: column_name, val: row[column_name]}).then(res => {
        if (res.data.code === 0) {
          this.$message({type: 'success', message: res.data.msg});
          this.edit_column = null;
          this.edit_column_name = '';
          this.save_loading = false;
          if(column_name=='monitor_min_price'){
            this.editClnWidth1 = "90px";
          }
          if(column_name=='monitor_max_price'){
            this.editClnWidth2 = "90px";
          }
          if(column_name=='monitor_status'){
            this.editClnWidth3 = "90px";
          }
        } else {
          this.$message.error(res.data.msg);
          this.save_loading = false;
        }
      }).catch(e => {
        this.$message.error(e.message);
        this.save_loading = false;
      });
    },
    remove(row){
      this.$confirm('确定删除所选监控吗？', '删除监控', {type: 'warning'}).then(() => {
        const loading = this.$loading({lock: true, text: '正在保存', spinner: 'el-icon-loading'});
        this.$http.post('/app.monitor.order.del', {monitor_order_id: row.monitor_order_id}).then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message({type: 'success', message: res.data.msg});
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      }).catch(() => 0);
    },
    addMonitor(row){
      this.current = row;
      this.showEdit = true;
    },
    toOrder(orderCode){
      var _url = "http://jh.airkmg.com/dxair/a/order/qnr/dxGnOrder/listcp?orderCode="+orderCode;
      if (this.isElectron){
        this.ipcRenderer.send('MAINWIN:openWin',JSON.stringify({title:"国内订单管理",url:_url}));
      }
      else{
        window.open(_url, '_blank');
      }
    },
    test(){
      console.log('test btn click')
      this.pageData = [];
    }
  }
}
</script>

<style scoped>
/deep/.el-input-group__append, .el-input-group__prepend{
  padding:0 10px;
}
</style>
